<script setup>
import { ref,inject } from "vue"

//登录相关逻辑
const userinfo=inject("userinfo")

var statistical_data = ref({
    organization_num: 306,     // 机构数
    talent_num: 742,           // 人才数
    product_num: 3658,         // 产品数
    service_num: 125,          // 服务数
    demand_num: 148,           // 需求数
    policy_num: 195,           // 政策数
    news_num: 548,             // 行业新闻数
    organization_news_num: 684,// 机构新闻数
    user_num: 10458            // 注册用户数
})
var total_num = ref(0)           // 资源总数=机构+人才+产品+服务+需求
total_num.value = statistical_data.value.organization_num
    + statistical_data.value.talent_num
    + statistical_data.value.product_num
    + statistical_data.value.service_num
    + statistical_data.value.demand_num
</script>

<template>
<div>
    <div class="container">
        <div class="header">
            <el-image src="/img/home.jpg"></el-image>
        </div>
        <div class="main">
            <div class="item">
                <el-statistic title="资源总数" :value="total_num" >
                    <template #suffix>个</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="入驻机构数" :value="statistical_data.organization_num"  >
                    <template #suffix>家</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="专家人才数" :value="statistical_data.talent_num"  >
                    <template #suffix>人</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="产品数" :value="statistical_data.product_num"  >
                    <template #suffix>个</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="服务数" :value="statistical_data.service_num"  >
                    <template #suffix>项</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="需求数" :value="statistical_data.demand_num"  >
                    <template #suffix>个</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="政策数" :value="statistical_data.policy_num"  >
                    <template #suffix>条</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="行业新闻数" :value="statistical_data.news_num"  >
                    <template #suffix>条</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="机构新闻数" :value="statistical_data.organization_news_num"  >
                    <template #suffix>条</template>
                </el-statistic>
            </div>
            <div class="item">
                <el-statistic title="注册用户数" :value="statistical_data.user_num"  >
                    <template #suffix>人</template>
                </el-statistic>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped>
.container{
    display:flex;
    flex-direction:column;
    align-items: center;
}
.main{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    padding-top:30px;
    padding-bottom:30px;
    border-radius:10px;
    box-shadow: var(--el-box-shadow);
}
.item{
    width:150px;
    height:90px;
    text-align:center;
}

:deep(.el-statistic__head) {
    font-size: medium;
}

:deep(.el-statistic__number) {
    font-size: x-large;
    color:var(--el-color-primary);
    font-weight:bolder;
}
:deep(.el-statistic__suffix){
    font-size:medium;
    color:var(--el-color-primary);
}
</style>